<template>
  <div class="train">
    <div class="train-title">培训体系</div>
    <div class="train-items">
        <div class="train-item" v-for="(item, key) in trainList" :key=key>
            <div class="train-item-gif">
                <img :src="item.photo">
            </div>
            <div class="train-item-title">{{item.name}}</div>
            <div class="train-item-text">{{item.remarks}}</div>
            <div class="to-detail">
                <span :class="colorList[key]" @click="goto(item.name)">查看详情</span>
            </div>
        </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'train',
  data () {
      return{
        colorList: [
            'to-detail-orange',
            'to-detail-blue',
            'to-detail-red'
        ]
      }
    
  },
  props: {
    trainList: {
        type: Array,
        required: true
    }
  },
  components: {
   
  },
  methods: {
      goto(name){
          let routeName;
          if(name=='企业定制'){
              routeName = 'college-company'
          }
          if(name=='软件培训'){
              routeName = 'college-software_train'
          }
          if(name=='ICT培训'){
              routeName = 'college-ICT_train'
          }
          this.$router.push(
              {
                name: routeName
              }
          )
      }
  }
}
</script>

<style lang="stylus" scoped>
.train{
    background:rgba(255,255,255,1);
    box-shadow:0px 1px 2px 0px rgba(0,0,0,0.1);
    margin-bottom: 20px; 
}
.train-title{
    box-sizing: border-box;
    font-size:16px;
    color:rgba(30,30,30,1);
    padding-left: 30px;
    line-height:58px;
    border-bottom: 1px solid rgba(238,238,238,1);
}
.train-items{
    padding: 40px 30px;
    font-size: 0;    
}
.train-item{
    width:260px;
    height:314px;
    padding: 0 20px;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    text-align: center;
    background:rgba(255,255,255,1);
}
.train-item:nth-child(3n+2){
   margin-left: 180px;
   margin-right: 180px;
}
.train-item-gif{
    margin-bottom: 37px;
}
.train-item-title{
    font-size:18px;
    font-family:MicrosoftYaHei-Bold;
    font-weight:bold;
    color:rgba(30,30,30,1);
    margin-bottom: 37px;
}
.train-item-text{
    height:58px;
    font-size:14px;
    margin-bottom: 55px;
    font-family:MicrosoftYaHei;
    color:rgba(130,130,130,1);
    line-height:34px;
    text-overflow: ellipsis;
    display: -webkit-box!important;
    -webkit-line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical;
}
.to-detail{
   
    span{
        display: inline-block;
        font-size:14px;
        font-family:MicrosoftYaHei-Bold;
        font-weight:bold;
        padding: 9px 16px;
        color:rgba(255,255,255,1);
        cursor: pointer;
    }
    
}
.to-detail-red{
    background:rgba(255,39,88,1);
    &:hover{
        background:rgba(183,21,58,1);
    }
}
.to-detail-blue{
    background:rgba(20,87,253,1);
    &:hover{
        background:rgba(14,53,151,1);
    }
}
.to-detail-orange{
    background:rgba(255,98,82,1);
    &:hover{
        background:rgba(164,59,49,1);
    }
}
</style>
